<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">


      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="applyList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="50" align="center"/>
      <el-table-column label="平台" align="center" prop="companyId" width="100"/>
      <el-table-column label="订单号" align="center" prop="orderSn" width="100"/>
      <el-table-column label="贷款用户" align="center" prop="userName" width="100"/>
      <el-table-column label="手机号码" align="center" prop="userPhone" width="100"/>
      <el-table-column label="贷款金额" align="center" prop="realApplyMoney" width="100"/>
      <el-table-column label="账号管理费" align="center" prop="manageMoney" width="100"/>
      <el-table-column label="审核费用" align="center" prop="riskMoney" width="100"/>
      <el-table-column label="服务费" align="center" prop="applyServiceCharge" width="100"/>
      <el-table-column label="实际到账金额" align="center" prop="realApplyMoney" width="100">
        <template slot-scope="scope">
          {{ scope.row.realApplyMoney - scope.row.manageMoney - scope.row.riskMoney - scope.row.applyServiceCharge }}
        </template>
      </el-table-column>
      <el-table-column label="初审人" align="center" prop="oneExamineBy">
        <template slot-scope="scope">
          <span v-for="item in userList" v-if="scope.row.oneExamineBy == item.userId">{{ item.userName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="终审人" align="center" prop="twoExamineBy">
        <template slot-scope="scope">
          <span v-for="item in userList" v-if="scope.row.twoExamineBy == item.userId">{{ item.userName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="status">
        <template slot-scope="scope">
          <span v-if="scope.row.status == '10'">打款失败</span>
          <span v-else>未知</span>
        </template>
      </el-table-column>
      <el-table-column label="失败描述" align="center" prop="payLogEntity.remark" width="200"/>
      <el-table-column label="申请时间" align="center" prop="createTime" width="160">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="打款时间" align="center" prop="applyTime" width="160">
        <template slot-scope="scope">
          <span v-if="scope.row.payLogEntity">{{ parseTime(scope.row.payLogEntity.payTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="160"
        fixed="right"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
          >
            <router-link :to="'/app/user-info/index/' + scope.row.id + '/' + scope.row.userId" class="link-type">
              <span>查看</span>
            </router-link>
          </el-button>

          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handlePay(scope.row,'0')"
          >线下打款
          </el-button>

          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handlePay1(scope.row,'1')"
            v-hasPermi="['app:apply:update']"
          >线上打款
          </el-button>

          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          >关闭
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 分配 -->
    <el-dialog title="打款" :visible.sync="open" width="600px">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">

        <el-form-item label="贷款额度">
          <el-input v-model="form.realApplyMoney" disabled/>
        </el-form-item>

        <el-form-item label="周期">
          <el-input v-model="form.applyCycle" disabled/>
        </el-form-item>

        <el-form-item label="账号管理费">
          <el-input v-model="form.manageMoney" disabled/>
        </el-form-item>

        <el-form-item label="服务费">
          <el-input v-model="form.applyServiceCharge" disabled/>
        </el-form-item>

        <el-form-item label="审核费用">
          <el-input v-model="form.riskMoney" disabled/>
        </el-form-item>

        <el-form-item label="实际打款金额">
          <el-input v-model="form.realPayMoney" disabled/>
        </el-form-item>

        <el-form-item label="日利率">
          <el-input v-model="form.dayRate" disabled>
            <template slot="append">%</template>
          </el-input>
        </el-form-item>

        <el-form-item label="逾期利率">
          <el-input v-model="form.expireRate" disabled>
            <template slot="append">%</template>
          </el-input>
        </el-form-item>

        <el-form-item label="银行流水号" prop="bankOrderNo">
          <el-input v-model="form.bankOrderNo" placeholder="请输入银行流水号"/>
        </el-form-item>

        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" :rows="3" v-model="form.remark"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitHandlerPay">确 定</el-button>
        <el-button @click="open = false">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {listPayFailApply, listExamineUser, handlePay, closeApply} from "@/api/app/apply";

  export default {
    name: "PayFail",
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 订单表格数据
        applyList: null,
        userList: null,
        // 公司数据
        companyList: null,
        companyId: this.$store.state.user.companyId,
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 日期范围
        dateRange: [],
        type: null,
        // 表单参数
        form: {},
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          companyId: undefined,
          status: '10',
        },
        // 表单校验
        rules: {
          // bankOrderNo: [
          //   {required: true, message: "银行流水号不能为空", trigger: "blur"},
          // ]
        }
      };
    },
    watch: {},
    created() {
      this.getList();
      this.getListExamineUser();
    },
    methods: {
      /** 查询列表 */
      getList() {
        this.loading = true;
        if (this.companyId) {
          this.queryParams.companyId = this.companyId
        }
        listPayFailApply(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
            this.applyList = response.rows;
            this.total = response.total;
            this.loading = false;
          }
        );
      },

      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          id: undefined,
          realApplyMoney: 0,
          manageMoney: 0,
          riskMoney: 0,
          applyServiceCharge: 0,
          applyCycle: 0,
          realPayMoney: 0,
          bankOrderNo: undefined
        };
        this.type = null,
          this.resetForm("form");
      },

      getListExamineUser() {
        listExamineUser().then(response => {
            this.userList = response.data;
          }
        );
      },

      /** 重置按钮操作 */
      resetQuery() {
        this.dateRange = [];
        this.resetForm("queryForm");
        this.handleQuery();
      },

      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },

      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id);
        this.single = selection.length != 1;
        this.multiple = !selection.length;
      },

      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const id = row.id;
        getApply(id).then(response => {
          this.form = response.data;
          this.form.realMoney = this.form.applyMoney - this.form.manageMoney - this.form.examineMoney - this.form.serviceMoney;
          this.open = true;
          this.title = "修改";
        });
      },


      /** 提交按钮 */
      submitForm: function () {
        // this.$refs["form"].validate(valid => {
        //   if (valid) {
        //     if (this.form.id != undefined) {
        //       updateIndexApply(this.form).then(response => {
        //         this.$modal.msgSuccess("修改成功");
        //         this.open = false;
        //         this.getList();
        //       });
        //     } else {
        //       addIndexApply(this.form).then(response => {
        //         this.$modal.msgSuccess("新增成功");
        //         this.open = false;
        //         this.getList();
        //       });
        //     }
        //   }
        // });
      },

      /** 打款 */
      handlePay(row, type) {
        this.reset();
        this.form = row;
        this.type = type;
        this.form.realPayMoney = this.form.realApplyMoney - this.form.manageMoney - this.form.riskMoney - this.form.applyServiceCharge;
        this.open = true;

      },

      handlePay1(row, type) {
        this.$modal.confirm('是否确认对编号为"' + row.orderSn + '"的订单打款？').then(function () {
          return handlePay(row.id, type, null);
        }).then(() => {
          this.getList();
          this.open = false;
          this.$modal.msgSuccess("打款成功");
        }).catch((e) => {
          this.$modal.msgSuccess("打款失败" + e);
        });
      },

      submitHandlerPay() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            let that = this.form;
            this.$modal.confirm('是否确认对编号为"' + this.form.orderSn + '"的订单打款？').then(function () {
              return handlePay(that.id, '0', that.bankOrderNo);
            }).then(() => {
              this.getList();
              this.open = false;
              this.$modal.msgSuccess("打款成功");
            }).catch((e) => {
              this.$modal.msgSuccess("打款失败" + e);
            });
          }
        })
      },

      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id || this.ids;
        this.$modal.confirm(this.$t('closed')).then(function () {
          return closeApply(ids);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("success");
        }).catch((e) => {
          console.log(e)
        });
      },

      // handleMoney(){
      //   this.form.realMoney = this.form.applyMoney - this.form.manageMoney - this.form.examineMoney - this.form.serviceMoney;
      // }
    }
  };
</script>
